<template>
    <div id="Permission">
        <Filters
            block
            :form="searchForm"
            :filterData="filterData"
            @confirm="changePage(1)"
        />
        <div class="container">
            <DataTable
                rowKey="role_id"
                :btns="btns"
                :tableData="table.data"
                :tableColumn="table.column"
                @refresh="getList"
                :pageConfig="table.pageConfig"
            />
        </div>
        <CommonDialog
            :rows="dialog.rows"
            :form="dialog.form"
            title="新增角色"
            :visible="dialog.visible"
            @hideDialog="dialog.visible = false"
            @confirm="handleDialogSubmit" />
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import util from '@/util/util'

@Component
export default class Permission extends Vue {
    btns: any[] = [
        // {
        //     label: '新增角色',
        //     icon: 'add',
        //     callback: this.showDialog,
        //     permission: 159
        // }
    ]
    table: any = {
        data: [],
        column: {
            name: {
                label: '角色名称',
                align: 'center'
            },
            action: {
                label: '操作',
                width: 230,
                template: [
                    // {
                    //     tag: 'a',
                    //     text: '删除',
                    //     confirm: this.delHandle,
                    //     permission: 160
                    // },
                    {
                        tag: 'router-link',
                        text: '详情',
                        path: '/systemManage/permission/detail',
                        query: {
                            role_id: '',
                            name: ''
                        }
                    }
                ]
            }
        },
        pageConfig: {
            current: 1,
            total: 10,
            pageSize: 10,
            onChange: this.changePage
        }
    }
    dialog: any = {
        visible: false,
        form: {
            name: ''
        },
        rows: {
            name: {
                label: '角色名',
                placeholder: '请输入角色名',
                maxlength: 10,
                rules: [
                    { required: true, message: '请输入角色名', trigger: 'blur' }
                ]
            }
        }
    }
    searchForm: any = {
        name: ''
    }

    get filterData (): any {
        return {
            name: {
                label: '角色名称',
                type: 'input',
                template: {
                    placeholder: '请输入角色名称',
                    clearable: true
                }
            }
        }
    }

    init () {
        this.getList()
    }
    getList () {
        let data = {
            page: this.table.pageConfig.current,
            size: this.table.pageConfig.pageSize,
            name: this.searchForm.name
        }
        this.$api.adminRoleRoleListFetch(data).then(({ data }: any) => {
            this.table.data = data.records
            this.table.pageConfig.total = data.total
        })
    }
    changePage (val: number) {
        this.table.pageConfig.current = val
        this.getList()
    }
    showDialog () {
        this.dialog.visible = true
        Object.assign(this.dialog.form, { name: '' })
    }
    handleDialogSubmit () {
        this.$api.adminRoleAddRoleFetch(this.dialog.form).then((res: any) => {
            this.$message.success('新增角色成功')
            this.dialog.visible = false
            this.getList()
        })
    }
    delHandle ({ role_id }: any) {
        this.$api.adminRoleRoleDeleteFetch({ roleId: role_id }).then((res: any) => {
            this.$message.success('删除角色成功')
            this.getList()
        })
    }
}
</script>

<style lang="scss">

</style>
